<template>
  <van-tabbar :modelValue="props.modelValue" @change="handleTabChange" class="flexbox" >
    <router-link  to="index">
      <van-tabbar-item name="home"  icon="home-o">
        主页
      </van-tabbar-item>
    </router-link>
    <router-link to="search">
      <van-tabbar-item name="search" icon="search">
        搜索
      </van-tabbar-item>
    </router-link>
    <router-link to="cart">
      <van-tabbar-item name="cart" icon="cart-o">
        购物车
      </van-tabbar-item>
    </router-link>
    <router-link to="about">
      <van-tabbar-item name="about" icon="friends-o">
        我的
      </van-tabbar-item>
    </router-link>
  </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';
// const isSelect = ref(props.data);
const props = defineProps(['modelValue']); // 接收modelValue
const emit = defineEmits(['update:modelValue']); // 定义更新事件

const handleTabChange = (value) => {
  emit('update:modelValue', value); // 点击标签时触发更新
};

  // console.log(props);
// return { active };
</script>

<style scoped>
.flexbox{
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  max-width:512px;
}
</style>